<%--
  Created by IntelliJ IDEA.
  User: caojian
  Date: 2017/3/10
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>修改商品</title>
    <jsp:include page="common/common_css.jsp"/>
    <style>
        .a-t-r {
            position: absolute !important;
            top: 0;
            right: 0;
        }

        .column img {
            max-width: 29em;
        }
    </style>
</head>
<body>
<jsp:include page="common/header.jsp"/>
<div class="ui main container">
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <jsp:include page="common/message.jsp"/>
            <div style="border: 1px solid rgba(34,36,38,.15);padding: 5px;margin-bottom: 20px;">
                <input name="goodsId" type="hidden" value="${cutGoods.goods.id}">
                <form class="ui large form" method="post"
                      action="${pageContext.request.contextPath}/sale/goods/${cutGoods.goods.id}">
                    <label>基本信息：</label>
                    <div class="ui stacked segment">
                        <input name="categoryId" type="hidden" value="${cutGoods.category.id}">
                        <div class="field">
                            <div class="ui simple dropdown large label">
                                分类：
                                <div class="text">${cutGoods.category.name}
                                </div>
                                <i class="dropdown icon"></i>
                                <div class="menu">
                                    <c:forEach items="${categoryList}" var="category">
                                        <div class="item JS-category-item" data-value="${category.id}">
                                            <label>${category.name}</label>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui labeled input">
                                <div class="ui label">
                                    商品名称：
                                </div>
                                <input name="name" type="text" maxlength="50"
                                       value="${cutGoods.goods.name}">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui labeled input">
                                <div class="ui label">
                                    商品介绍：
                                </div>
                                <input name="introduce" type="text"
                                       maxlength="200" value="${cutGoods.goods.introduce}">
                            </div>
                        </div>
                        <div class="field">
                            <input name="price" type="hidden">
                            <div class="ui right labeled input">
                                <div class="ui label">
                                    商品单价：
                                </div>
                                <input name="priceTemp" type="number" min="0" value="${cutGoods.goods.price/100}">
                                <div class="ui basic label">元</div>
                            </div>
                        </div>
                        <div class="ui fluid large teal submit button disabled">完成修改</div>
                        <div class="ui error message"></div>
                    </div>
                </form>
            </div>
            <div style="border: 1px solid rgba(34,36,38,.15);padding: 5px;margin-bottom: 20px;">
                <label>商品数量：</label>
                <div class="ui stacked segment">
                    <label>剩余：<label id="JS-number-text">${cutGoods.goods.number}</label></label>
                    <div class="ui input">
                        <button id="JS-number-add" class="ui teal button"><i class="plus icon"></i>增加</button>
                        <input id="JS-number" name="number" type="number" min="0">
                        <button id="JS-number-reduce" class="ui teal button"><i class="minus icon"></i>减少</button>
                    </div>
                </div>
            </div>
            <div style="border: 1px solid rgba(34,36,38,.15);padding: 5px;margin-bottom: 20px;">
                <label>封面图片：</label>
                <i id="JS-cover-change" class="exchange large icon a-t-r"></i>
                <div class="ui stacked segment">
                    <img id="JS-cover" src="${downDomain}${cutGoods.goods.imageKey}" alt="封面图">
                    <div id="JS-progress" class="ui active centered inline loader" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--确认弹窗-->
<div id="JS-modal-confirm" class="ui basic modal">
    <div class="content" style="text-align: center;">
        <div style="background-color: white;display: inline-block;padding: 20px 60px;border-radius: 5px;">
            <div id="JS-modal-confirm-title" style="display: inline-block;color: black;margin-bottom: 50px;">
            </div>
            <br>
            <div class="actions">
                <div class="ui small primary blue column approve button" style="display: inline-block;">
                    OK
                </div>
                <div class="ui small primary blue column cancel button"
                     style="display: inline-block;margin-left: 30px;">Cancel
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="common/footer.jsp"/>
<jsp:include page="common/common_js.jsp"/>
<script>
    $(function () {
        var CJ = {
            data: {},
            event: {
                registerGlobal: function () {
                    $('.JS-category-item').click(function () {
                        var value = $(this).data('value');
                        $('input[name=categoryId]').val(value);
                        $('form .submit.button').removeClass('disabled');
                    });
                    $('input[name=name],input[name=introduce],input[name=priceTemp]').bind('input propertychange', function () {
                        $('form .submit.button').removeClass('disabled');
                    });
                    $('form').submit(function () {
                        $('input[name=price]').val(common.yuan2fen($('input[name=priceTemp]').val()));
                    });
                    $('#JS-number-add').click(function () {
                        var number = $('#JS-number').val();
                        if (number == '') {
                            alert('请输入数量！');
                            return;
                        }
                        number = window.parseInt(number);
                        if (number <= 0) {
                            alert('输入的数量不能小于等于0！');
                            return;
                        }
                        $('#JS-modal-confirm-title').text('确定增加数量' + number + '？');
                        $('#JS-modal-confirm').modal({
                            closable: false, allowMultiple: true, observeChanges: true,
                            onApprove: function () {
                                if ($('#JS-modal-confirm .approve.button').hasClass('loading')) {
                                    return false;
                                }
                                CJ.request.addGoodsNumber(number);
                                return false;
                            }
                        }).modal('show');
                    });
                    $('#JS-number-reduce').click(function () {
                        var number = $('#JS-number').val();
                        if (number == '') {
                            alert('请输入数量！');
                            return;
                        }
                        number = window.parseInt(number);
                        if (number <= 0) {
                            alert('输入的数量不能小于等于0！');
                            return;
                        }
                        ;
                        $('#JS-modal-confirm-title').text('确定减少数量' + number + '？');
                        $('#JS-modal-confirm').modal({
                            closable: false, allowMultiple: true, observeChanges: true,
                            onApprove: function () {
                                if ($('#JS-modal-confirm .approve.button').hasClass('loading')) {
                                    return false;
                                }
                                CJ.request.reduceGoodsNumber(number);
                                return false;
                            }
                        }).modal('show');
                    });
                    //封面
                    Qiniu.uploader({
                        runtimes: 'html5,flash,html4',      // 上传模式，依次退化
                        browse_button: 'JS-cover-change',         // 上传选择的点选按钮，必需
                        uptoken_url: ROOT + '/sale/goods/' + CJ.data.goodsId + '/modifyToken',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
                        get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
                        domain: config.download,     // bucket域名，下载资源时用到，必需
                        max_file_size: '100mb',             // 最大文件体积限制
                        flash_swf_url: 'https://cdn.staticfile.org/plupload/2.1.9/Moxie.swf',  //引入flash，相对路径
                        max_retries: 3,                     // 上传失败最大重试次数
                        dragdrop: false,                     // 开启可拖曳上传
                        chunk_size: '4mb',                  // 分块上传时，每块的体积
                        auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
                        init: {
                            'FilesAdded': function (up, files) {
                                if (up.files.length > 1) { // 最多上传1张图
                                    up.splice(0, up.files.length - 1);
                                }
                            },
                            'BeforeUpload': function (up, file) {
                                // 每个文件上传前，处理相关的事情
                                window.common.previewImage(file, function (imgsrc) {
                                    CJ.data.oldImageUrl = $('#JS-cover').attr('src');
                                    $('#JS-cover').attr('src', imgsrc);
                                });
                                $('#JS-progress').text('0%');
                                $('#JS-progress').show();
                            },
                            'UploadProgress': function (up, file) {
                                // 每个文件上传时，处理相关的事情
                                $('#JS-progress').text(file.percent + '%');
                            },
                            'FileUploaded': function (up, file, info) {
                                var json = window.JSON.parse(info);
                                if (json.code != 1) {
                                    alert('上传失败');
                                    $('#JS-cover').attr('src', CJ.data.oldImageUrl);
                                }
                            },
                            'Error': function (up, err, errTip) {
                                //上传出错时，处理相关的事情
                                alert('上传失败');
                                $('#JS-cover').attr('src', CJ.data.oldImageUrl);
                            },
                            'UploadComplete': function () {
                                //队列文件处理完毕后，处理相关的事情
                                $('#JS-progress').hide();
                            },
                        }
                    });
                },
            },
            request: {
                addGoodsNumber: function (number) {
                    $('#JS-modal-confirm .approve.button').addClass('loading');
                    window.common.ajax({
                        url: ROOT + '/sale/goods/' + CJ.data.goodsId + '/addNumber',
                        type: 'post',
                        data: {
                            number: number
                        },
                        dataType: 'json',
                        success: function () {
                            $('#JS-modal-confirm').modal('hide');
                            $('#JS-number').val('');
                            var oldNumber = $('#JS-number-text').text();
                            oldNumber = window.parseInt(oldNumber);
                            oldNumber += number;
                            $('#JS-number-text').text(oldNumber);
                        },
                        complete: function () {
                            $('#JS-modal-confirm .approve.button').removeClass('loading');
                        },
                    });
                },
                reduceGoodsNumber: function (number) {
                    $('#JS-modal-confirm .approve.button').addClass('loading');
                    window.common.ajax({
                        url: ROOT + '/sale/goods/' + CJ.data.goodsId + '/reduceNumber',
                        type: 'post',
                        data: {
                            number: number
                        },
                        dataType: 'json',
                        success: function () {
                            $('#JS-modal-confirm').modal('hide');
                            $('#JS-number').val('');
                            var oldNumber = $('#JS-number-text').text();
                            oldNumber = window.parseInt(oldNumber);
                            oldNumber -= number;
                            $('#JS-number-text').text(oldNumber);
                        },
                        complete: function () {
                            $('#JS-modal-confirm .approve.button').removeClass('loading');
                        },
                    });
                },
            },
            ui: {},
            init: function () {
                CJ.data.goodsId = $('input[name=goodsId]').val();
                CJ.event.registerGlobal();
            }
        };
        CJ.init();
        $('.ui.form')
            .form({
                fields: {
                    goodsId: {
                        identifier: 'goodsId',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '商品id'
                            },
                        ]
                    },
                    categoryId: {
                        identifier: 'categoryId',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '请选择分类'
                            },
                        ]
                    },
                    name: {
                        identifier: 'name',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '请输入商品名'
                            },
                        ]
                    },
                    priceTemp: {
                        identifier: 'priceTemp',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '请输入商品单价'
                            },
                        ]
                    },
                }
            })
        ;
    });
</script>
</body>
</html>
